<!-- 通讯录 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew :title="title" :breadCrumb="breadCrumb"> </PageHeaderNew>
    </template>
    <div class="container1">
      <div class="address-book-left">
        <div
          :class="['group', group.key === selected ? 'selected' : '']"
          v-for="group in groupList"
          :key="group.key"
          @click="tabClick(group)"
        >
          <a-space>
            <template v-if="group.key === 1">
              <icon-list
                :size="22"
                style="
                  border-radius: 5px;
                  color: #fff;
                  background-color: #0089ff;
                  padding: 4px;
                "
              />
            </template>
            <template v-if="group.key === 3">
              <icon-user
                :size="22"
                style="
                  border-radius: 5px;
                  color: #fff;
                  background-color: #0089ff;
                  padding: 4px;
                "
              />
            </template>
            <template v-if="group.key === 4">
              <icon-user-group
                :size="22"
                style="
                  border-radius: 5px;
                  color: #fff;
                  background-color: #0089ff;
                  padding: 4px;
                "
              />
            </template>
            {{ group.lable }}
          </a-space>
        </div>
        <a-divider />
        <a-tree
          :data="managementList"
          @select="selectItem"
          :default-expand-all="true"
          :blockNode="true"
          :fieldNames="{
            key: 'id',
            title: 'name'
            // children: 'items',
            // icon: 'customIcon'
          }"
        >
          <template #switcher-icon="node, { isLeaf }">
            <IconDown v-if="!isLeaf" />
            <IconStar v-if="isLeaf" />
          </template>
          <template #title="nodeData">
            <span
              :style="{
                paddingLeft:
                  nodeData.level > 2 ? '32px' : (nodeData.level - 1) * 16 + 'px'
              }"
              >{{ nodeData.name }}</span
            >
          </template>
        </a-tree>
      </div>
      <div class="wrap" v-if="selected === 1 || selected === 3">
        <!-- <a-input
      v-model="searchVal"
      @input="onSearch"
      class="search"
      placeholder="搜索群"
    >
      <template #prefix>
        <icon-search />
      </template>
    </a-input> -->
        <TableTurn
          :tableData="getFrequentContactList"
          ref="tableRef"
          :pagination="false"
        >
          <!-- <a-table-column :width="80">
            <template #title> 头像 </template>
            <template #cell="{ record }">
              <a-avatar
                :size="40"
                :imageUrl="record.headPortrait"
                :style="{ backgroundColor: '#3c6eff' }"
              >
                {{ record.name }}
              </a-avatar>
            </template>
          </a-table-column> -->
          <TableControlShow
            :selectedHeader="selectedHeader"
            :showCtlCodeArr="showCtlCodeArr"
            :specialCtlCode="['C62B8DC31189847E0972B5D8F721404B1']"
          >
            <template #custom="record">
              <div
                v-if="
                  record.controlData.ctlCode ===
                  'C62B8DC31189847E0972B5D8F721404B1'
                "
                :style="{
                  'white-space': 'nowrap',
                  overflow: 'hidden',
                  'text-overflow': 'ellipsis',
                  width: '100px',
                  'text-align': 'left',
                  paddingLeft:
                    record.cellData.level > 2
                      ? '32px'
                      : (record.cellData.level - 1) * 16 + 'px',
                  cursor: 'pointer'
                }"
              >
                <a-avatar
                  :size="40"
                  :imageUrl="record.cellData.headPortrait"
                  :style="{ backgroundColor: '#3c6eff', marginRight: ' 5px' }"
                >
                  {{ customSubstring(record.cellData.name) }}
                </a-avatar>
                <span
                  style="color: #165dff"
                  @click="
                    goDetail(
                      record.cellData.id,
                      record.cellData.useTemplate.ownerType
                    )
                  "
                >
                  {{ record.cellData.name }}
                </span>
              </div>
            </template>
          </TableControlShow>
          <a-table-column :width="100" fixed="right">
            <template #title>
              <a-tooltip content="表头设置">
                <icon-font
                  type="icon-setting-def"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                  @click="modalVisiable = !modalVisiable"
                />
              </a-tooltip>
            </template>
            <template #cell="{ record }">
              <!-- <a-button
            type="text"
            v-if="record.proceduresStatus !== 2"
            @click="goHandleEntry(record)"
            >办理入职</a-button
          > -->
              <a-space :size="0">
                <a-tooltip content="聊天">
                  <icon-message
                    :size="24"
                    style="color: #165dff; margin-left: 10px; cursor: pointer"
                    @click="send(record)"
                  />
                </a-tooltip>

                <!-- <a-tooltip content="员工档案">
                  <icon-font
                    type="icon-details-def"
                    :size="26"
                    :style="{
                      cursor: 'pointer'
                    }"
                    @click="goDetail(record.id, record.useTemplate.ownerType)"
                  />
                </a-tooltip> -->

                <!-- <a-tooltip content="删除" position="left">
                  <a-popconfirm
                    content="是否确认删除该条数据?"
                    @ok="del(record.id)"
                  >
                    <IconFont
                      type="icon-delete"
                      :size="26"
                      :style="{
                        cursor: 'pointer'
                      }"
                    />
                  </a-popconfirm>
                </a-tooltip>
                <a-tooltip content="办理入职" v-if="record.progress === 4">
                  <a-dropdown
                    @select="(value: number, e: Event, id: number) => handleEntryDropdown(value, e, record)"
                  >
                    <icon-font
                      type="icon-ruzhibanli"
                      :size="26"
                      :style="{
                        cursor: 'pointer'
                      }"
                    />
                    <template #content>
                      <a-doption :value="1" v-if="record.epStatus !== 2"
                        >{{
                          record.epStatus == 0
                            ? '创建入职手续'
                            : record.epStatus === 1
                            ? '配置入职手续'
                            : ''
                        }}
                      </a-doption>
                      <a-doption :value="2" v-if="record.onboardingStatus <= 1"
                        >入职方案审批</a-doption
                      >
                      <a-doption :value="2" v-else>查看审批详情</a-doption>
                      <a-doption
                        :value="3"
                        v-if="
                          record.onboardingStatus === 4 &&
                          record.contractStatus < 10
                        "
                        >发起合同签署</a-doption
                      >


                      <a-doption :value="4">放弃入职</a-doption>
                    </template>
                  </a-dropdown>
                </a-tooltip> -->
              </a-space>
            </template>
          </a-table-column>
        </TableTurn>
        <!-- <div class="address-book-right">
          <div v-for="item in frequentContact" :key="item.id">
            <div class="demo-point-trigger" v-if="item.id !== userId">
              <div class="person-item" @click="send(item)">
                <PersonnelIcon
                  :name="item.name"
                  :headPortraits="item.headPortrait"
                />
                <div class="person-item-name">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <ContactGroup v-if="selected === 4" :contactGroup="contactGroup" />
      <div v-if="!selected" class="address-book-right">
        <TableTurn
          :tableData="getFrequentContactList111"
          ref="tableRef111"
          :pagination="false"
        >
          <!-- <a-table-column :width="80">
            <template #title> 头像 </template>
            <template #cell="{ record }">
              <a-avatar
                :size="40"
                :imageUrl="record.headPortrait"
                :style="{ backgroundColor: '#3c6eff' }"
              >
                {{ customSubstring(record.name) }}
              </a-avatar>
            </template>
          </a-table-column> -->
          <TableControlShow
            :selectedHeader="selectedHeader"
            :showCtlCodeArr="showCtlCodeArr"
            :specialCtlCode="['C62B8DC31189847E0972B5D8F721404B1']"
          >
            <template #custom="record">
              <div
                v-if="
                  record.controlData.ctlCode ===
                  'C62B8DC31189847E0972B5D8F721404B1'
                "
                :style="{
                  'white-space': 'nowrap',
                  overflow: 'hidden',
                  'text-overflow': 'ellipsis',
                  width: '100px',
                  'text-align': 'left',
                  paddingLeft:
                    record.cellData.level > 2
                      ? '32px'
                      : (record.cellData.level - 1) * 16 + 'px',
                  cursor: 'pointer'
                }"
              >
                <a-avatar
                  :size="40"
                  :imageUrl="record.cellData.headPortrait"
                  :style="{ backgroundColor: '#3c6eff', marginRight: ' 5px' }"
                >
                  {{ customSubstring(record.cellData.name) }}
                </a-avatar>
                <span
                  style="color: #165dff"
                  @click="
                    goDetail(
                      record.cellData.id,
                      record.cellData.useTemplate.ownerType
                    )
                  "
                >
                  {{ record.cellData.name }}
                </span>
              </div>
            </template>
          </TableControlShow>
          <a-table-column :width="100" fixed="right">
            <template #title>
              <a-tooltip content="表头设置">
                <icon-font
                  type="icon-setting-def"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                  @click="modalVisiable = !modalVisiable"
                />
              </a-tooltip>
            </template>
            <template #cell="{ record }">
              <div style="float: left; display: flex">
                <a-tooltip
                  content="新增成员"
                  v-if="!labeListIds.data.includes(record.id)"
                >
                  <IconFont
                    :style="{
                      cursor: 'pointer'
                    }"
                    type="icon-xinzengkehu"
                    :size="24"
                    @click="(e) => addFri(e, record.id, 1)"
                  ></IconFont>
                </a-tooltip>
                <a-tooltip content="移除成员" v-else>
                  <icon-delete
                    :size="24"
                    style="color: red; cursor: pointer"
                    @click="(e) => addFri(e, record.id, 2)"
                  />
                  <!-- <IconFont
                    type="icon-xinzengkehu"
                    @click="addFri(person.id, false)"
                  ></IconFont> -->
                </a-tooltip>
                <a-tooltip content="聊天" style="">
                  <icon-message
                    :size="24"
                    style="color: #165dff; margin-left: 10px; cursor: pointer"
                    @click="send(record)"
                  />

                  <!-- <IconFont
                    type="icon-xinzengkehu"
                    @click="addFri(person.id, false)"
                  ></IconFont> -->
                </a-tooltip>
              </div>
            </template>
          </a-table-column>
        </TableTurn>
        <!-- <a-trigger
          trigger="click"
          align-point
          position="left"
          :disabled="true"
          v-for="person in personnelList"
          :key="person.userId"
        >
          <div class="demo-point-trigger">
            <div
              class="person-item"
              @mouseenter="
                isShowAddFriIcon = true;
                selectedPerson = person;
              "
              @mouseleave="
                isShowAddFriIcon = false;
                selectedPerson = null;
              "
            >
              <a-space :size="0">
                <PersonnelIcon
                  :name="person.name"
                  :headPortraits="person.headPortrait"
                />
                <span class="person-item-name">{{ person.name }}</span>
              </a-space>
              <div
                class="option"
                v-show="isShowAddFriIcon && person === selectedPerson"
              >
                <a-tooltip
                  content="新增成员"
                  v-if="!labeListIds.data.includes(person.id)"
                >
                  <IconFont
                    type="icon-xinzengkehu"
                    :size="24"
                    @click="(e) => addFri(e, person.id, 1)"
                  ></IconFont>
                </a-tooltip>
                <a-tooltip content="移除成员" v-else>
                  <icon-delete
                    :size="24"
                    style="color: red"
                    @click="(e) => addFri(e, person.id, 2)"
                  />
                </a-tooltip>
                <a-tooltip content="聊天" style="">
                  <icon-message
                    :size="24"
                    style="color: #165dff; margin-left: 10px"
                    @click="send(person)"
                  />
                </a-tooltip>
              </div>
            </div>
          </div>
          <template #content>
            <div class="personnel-info">
              <div class="demo-point">
                <div class="point-info">
                  {{ person.name }}
                </div>
                <PersonnelIcon
                  :name="person.name"
                  :headPortraits="person?.headPortrait"
                />
              </div>
              <div class="btn">
                <a-button
                  type="primary"
                  shape="round"
                  long
                  size="large"
                  @click="send(person)"
                >
                  发消息
                </a-button>
              </div>
            </div>
          </template>
        </a-trigger> -->
      </div>
    </div>
  </ContentCard>
  <FormHeaderControlSetting
    title="员工花名册表头设置"
    v-model:visible="modalVisiable"
    :result-list="headerSetting"
    @headerSave="headerSave"
    :orginHeaderList="orginHeaderList.headerListCode"
    :forbidList="forbidList"
  >
  </FormHeaderControlSetting>
  <AddFriend v-model:visible="addFriVisible" :data="selectedPerson" />
</template>

<script lang="ts" setup>
import { GetOrganizationListDetail } from '@/apis/management/organization/organizationManagement';
import { flatTree, dataTreeFilter } from '@/utils/utils';
import { GetOrganizationList } from '@/apis/management/organization/organizationManagement';
import { GetSectionPersonnel } from '@/apis/management/human/baseSetting/leaveSetting';
import PersonnelIcon from '../Message/components/PersonnelIcon.vue';
import TableControlShow from '@/components/TableControlShow/index.vue';
import { getPositionList, getFlatDept } from '@/utils/common';
import { GetBusinessModalData } from '@/apis/controltotal';
import { GetUserDetail } from '@/apis/management/user';
import { getPositionHierarchyList } from '@/apis/management/organization/baseSetting/PositionSystem/index';
import { useRouter } from 'vue-router';
import useClientContactsStore from '@/store/modules/client/contacts/index';
import ContactGroup from './components/ContactGroup.vue';
import {
  PostImportTemplate,
  GetHeaderSetting,
  PostHeaderSetting,
  PutHeaderSetting
} from '@/apis/management/base';
import {
  contactGroupCreate,
  getContactGroupList,
  getFrequentContact,
  editLabel,
  getLabeList,
  getFriendList
} from '@/apis/client/addressBook/index';
import AddFriend from './components/AddFriend.vue';
// 前往详情
const goDetail = (id: number, ownerType: number) => {
  router.push({
    name: 'HumanRosterDetail',
    query: {
      id,
      ownerType
    }
  });
};

const contactsStore = useClientContactsStore();
let modalVisiable = ref(false); // 判断是否显示表头
let headerSetting = ref<any>([]); // 当前的表头数据
let orginHeaderList = ref<any>([]); // 原始的表头数据
let forbidList: string[] = [
  'C62B8DC31189847E0972B5D8F721404B1', // 姓名
  'CDC80FC12D1DE43018D098E8322D0F966', // 工号
  'C3384BE6E60C341D68B8180DA04A1C4E1', // 手机号码
  'C7341027925C943708F3AEF98703ECC47', // 职位
  'CA8ABCC1480744557B3014C3454465A7E', // 公司
  'CED44AC9966904CD1AB546D309903727C' // 部门
]; // 必选的表头

// 表头设置返回的自定义事件
const headerSave = async (totalList: any, used: any, unused: any) => {
  try {
    const id = orginHeaderList.value.id;
    const headerListCode = used.map((item: any) => item.ctlCode).join(',');
    await PutHeaderSetting({
      id,
      userId: +localStorage.getItem('userId')!,
      ownerFuncType: 3,
      headerListCode
    });
    headerSetting.value = totalList;
    orginHeaderList.value.headerListCode = headerListCode;
  } catch (error) {
    console.log(error);
  }
};
let tableRef111 = ref(); // 储存table的ref

const getFrequentContactList111 = async () => {
  return personnelList.value || [];
};
const userId = +(localStorage.getItem('userId') + '');
const router = useRouter();
const title = '通讯录';
const breadCrumb = ['通讯录'];
const managementList = ref<never>();
const labeListIds = reactive<{ data: number[] }>({ data: [] });
const getManagementList = async () => {
  const res = await GetOrganizationList({});
  const res2 = await getLabeList();
  labeListIds.data = res2;
  managementList.value = dataTreeFilter(res) || [];
};
onMounted(() => {
  getManagementList();
});
const personnelList = ref<any[]>([]);
const selectItem = async (e: any, { node }: any) => {
  selected.value = 0;
  const res = await GetSectionPersonnel({
    type: node.node === '公司' ? '1' : '2',
    typeName: `${e[0]}`
  });

  personnelList.value = res || [];
  tableRef111.value.loadData();
};
const send = (person: any) => {
  contactsStore.setContacts(person);
  router.push({ name: 'Message' });
};
const groupList = [
  { key: 1, lable: '常用联系人' },
  // { key: 2, lable: '新的好友' },
  { key: 3, lable: '我的好友' },
  { key: 4, lable: '我的群组' }
];
const selected = ref(1);
let exportHeaderList = ref(); // 接口获取过来的原始表头数据
let deptList = ref([]), // 平级部门数据
  positionList = ref([]), // 职位数据
  positionHierarchyList = ref([]); // 职位层级数据
// 获取其他数据
const getData = async () => {
  try {
    const userId = +(localStorage.getItem('userId') as string);
    const [
      headerSettingRes,
      deptRes,
      positionListRes,
      businessModalDataRes,
      userDetailRes,
      positionHierarchyListRes
    ]: any = await Promise.all([
      // 获取人员表头
      GetHeaderSetting({
        ownerFuncType: 3,
        userId
      }),
      // 获取平级的组织数据
      getFlatDept(),
      // 获取所有职位数据
      getPositionList(),
      // 获取控件人员数据
      GetBusinessModalData({
        funcCode: 'SER_FUNCA0132DDBB9F14638815C4F0C7C476435'
      }),
      // 人员详情
      GetUserDetail({
        id: 93
      }),
      // 获取职位层级数据
      getPositionHierarchyList({
        pageNumber: 0,
        pageSize: -1
      })
    ]);
    orginHeaderList.value = headerSettingRes;
    headerSetting.value = [];
    const headerChildren: any = businessModalDataRes.funcCtlInfos.children;
    headerChildren.forEach((child: any, index: number) => {
      headerSetting.value.push({
        collectionName: child.subDetail.cnName,
        collectionCode: child.subDetail.subCode,
        heads: child.subDetail.subRelDetail.map((subDetail: any) => {
          const isDefault = headerSettingRes.headerListCode.includes(
            subDetail.ctlCode
          );
          return {
            ...subDetail,
            isDefault
          };
        })
      });
    });
    exportHeaderList.value = headerSetting.value;
    if (headerSettingRes.headerListCode.length < 1) {
      addHeader();
    }
    deptList.value = deptRes;
    positionList.value = flatTree(dataTreeFilter(positionListRes.content));
    positionHierarchyList.value = positionHierarchyListRes.content;
    // 获取组织详情数据
    const orgDetailRes = await GetOrganizationListDetail({
      id: +userDetailRes.date.organizationId
    });

    const {
      onJob,
      fullTime,
      practice,
      partTime,
      formal,
      probation,
      waitDepart,
      historyNum,
      historyDepart
    } = orgDetailRes;

    // rosterListNumberRes.forEach((item: any) => {
    //   if (enums[0].includes(item.name)) numberList.list1.push(item);
    //   else if (enums[1].includes(item.name)) numberList.list2.push(item);
    //   else if (enums[2].includes(item.name)) numberList.list3.push(item);
    //   else if (enums[3].includes(item.name)) numberList.list4.push(item);
    // });
  } catch (error: unknown) {
    console.log(error);
  }
};
const addHeader = async () => {
  try {
    const {
      funcCtlInfos: { children }
    } = (await GetBusinessModalData({
      funcCode: 'SER_FUNCA0132DDBB9F14638815C4F0C7C476435'
    })) as any;

    let headerListCode: any = [];
    children.forEach((item1: any) => {
      const { subRelDetail, cnName, subCode } = item1.subDetail;
      subRelDetail.forEach((item2: any, index2: number) => {
        headerListCode.push(item2.ctlCode);
      });
    });
    await PostHeaderSetting({
      userId: +(localStorage.getItem('userId') as string),
      ownerFuncType: 3,
      headerListCode: headerListCode.join(',')
    });
    getData();
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();
const tabClick = (item: any) => {
  selected.value = item.key;
  switch (item.key) {
    case 1:
      //
      // getFrequentContactList();
      refresh();
      return;
    case 2:
      //
      return;
    case 3:
      //
      // getFrequentContactList();
      refresh();

      return;
    case 4:
      getContactGroup();
      return;
  }
};
const contactGroup = ref<any[]>([]);
const frequentContact = ref<any[]>([]);
const contactGroupParams = reactive({ pageNumber: 0, pageSize: 10 });

// 获取我的群组信息
const getContactGroup = async () => {
  const res = await getContactGroupList(contactGroupParams);
  contactGroup.value = res.content || [];
};
let tableRef = ref(); // 储存table的ref

const refresh = () => {
  tableRef.value.loadData();
};

// 获取常用联系人
const getFrequentContactList = async () => {
  try {
    let res;
    if (selected.value === 1) {
      res = await getFrequentContact();
    } else if (selected.value === 3) {
      res = await getFriendList();
    }
    frequentContact.value = res.content || [];
    frequentContact.value.forEach((item: any) => {
      item.ctlValue.forEach((element: any) => {
        item[element.ctlCode] = element.ctlValue;
      });
    });
    return Promise.resolve(frequentContact.value);
  } catch (error: unknown) {
    console.log(error);
  }
};
// 表格中需要特殊渲染的template
const showCtlCodeArr = [
  'C63EC32DCE9CC4BE6AC7649E23234A542',
  'C9A9EF3DFFFC84AAFB97443DEE8E5B8CC',
  'CB4163C72FA5E45D38302983E8A66801E',
  'CE183DF5A547A4728A60F9AFDF3C53194',
  'CA8ABCC1480744557B3014C3454465A7E',
  'CED44AC9966904CD1AB546D309903727C',
  'C7341027925C943708F3AEF98703ECC47',
  'C1F5AA49A78EC4B4FBD487F4D5887E576',
  'C50267C6B8E104B0C91EDD25BCAE35609',
  'CECEBAA743F9B4160B40A5A3E78588712'
  // 'C62B8DC31189847E0972B5D8F721404B1'
];
// 在表格上显示的表头
const selectedHeader = computed(() => {
  const selectedHeaders: any[] = [];
  headerSetting.value.forEach((headerGroup: any, index: number) => {
    let defaultHeaders = headerGroup.heads.filter(
      (header: any) => header.isDefault === true
    );
    defaultHeaders = defaultHeaders.map((el: any) => {
      const sort = orginHeaderList.value.headerListCode
        .split(',')
        .findIndex((el2: any) => el2 === el.ctlCode);
      return {
        ...el,
        sort
      };
    });
    selectedHeaders.push(...defaultHeaders);
  });

  selectedHeaders.sort((a, b) => a.sort - b.sort);
  // 将姓名移到最前面
  const nameHeaderIndex = selectedHeaders.findIndex(
    (header) => header.ctlCode === 'C62B8DC31189847E0972B5D8F721404B1'
  );
  if (nameHeaderIndex !== -1) {
    selectedHeaders.unshift(...selectedHeaders.splice(nameHeaderIndex, 1));
  }
  return selectedHeaders;
});
let addFriVisible = ref(false); // 新增好友
let isShowAddFriIcon = ref(false); // 是否显示新增好友图标，鼠标移入的时候才显示
let selectedPerson = ref(); // 选中的联系人
// 新增好友
const addFri = async (event: MouseEvent, id: number, isValid: 1 | 2) => {
  event.preventDefault();
  await editLabel({ friendId: id, isValid });
  await getManagementList();
  // selectedPerson.value = record;
  // addFriVisible.value = true;
};
function customSubstring(str: string) {
  if (str.length <= 2) {
    return str; // 字符串长度小于等于两位，不做任何操作，直接返回原字符串
  }

  // 判断字符串第一个字符是否是中文
  const isChinese = /^[\u4e00-\u9fa5]+$/.test(str[0]);
  console.log('customSubstring', str, str[0], isChinese);

  if (isChinese) {
    return str.substring(str.length - 2); // 中文截取后两位
  } else {
    return str.substring(0, 2); // 英文截取前两位
  }
}
const itemClick = (group: any) => {
  // 新增此聊天群信息到消息列表
  // group.userId = group.userId;
  group.groupId = group.id;
  contactsStore.setContacts(group);
  router.push({ name: 'Message' });
};
</script>

<style lang="less" scoped>
.container1 {
  display: flex;
  height: calc(100vh - 270px);
  .address-book-left {
    border-right: #eee 1px solid;
    overflow: auto;
    min-width: 250px;
    .group {
      height: 40px;
      padding: 10px;
      display: flex;
      font-size: 18px;
      align-items: center;
      // justify-content: center;
      margin-bottom: 10px;
      margin-right: 5px;

      &:hover {
        background: #eee;
        border-radius: 5px;
        cursor: pointer;
      }
    }
    .selected {
      background: #eee;
      border-radius: 5px;
    }
  }
  .address-book-right {
    // flex: 1;
    // overflow: auto;
    flex: 1;
    /* overflow: auto; */
    width: 1200px;
    padding: 20px;
    height: 600px;
    :deep(.arco-table) {
      height: 600px;
    }
    .person-item {
      height: 40px;
      padding: 10px;
      display: flex;
      font-size: 18px;
      align-items: center;
      justify-content: space-between;
      &-name {
        margin-left: 10px;
      }
      &:hover {
        background: #eee;
        cursor: pointer;
      }
    }
  }
}
.demo-point-trigger {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // height: 100%;
  // background-color: var(--color-fill-2);
}
.personnel-info {
  padding: 10px;
  width: 320px;
  max-height: 500px;
  background-color: var(--color-bg-popup);
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  .btn {
    padding: 0 20px;
  }
}
.demo-point {
  display: flex;
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: 16px;
  margin-bottom: 16px;
  .point-info {
    flex: 1;
    font-size: 20px;
    font-weight: 800;
  }
}

.demo-point-wrapper {
  // display: block;
}
:deep(.arco-tree-node-indent) {
  width: 0px;
  height: 0px;
}
.wrap {
  // padding-top: 20px;
  flex: 1;
  width: 1000px;

  .search {
    width: 250px;
    margin: 20px;
  }
  .address-book-right {
    flex: 1;
    overflow: auto;
    .person-item {
      height: 40px;
      padding: 10px;
      display: flex;
      font-size: 18px;
      align-items: center;
      justify-content: start !important;
      &-name {
        margin-left: 10px;
      }
      &:hover {
        background: #eee;
        cursor: pointer;
      }
    }
  }
}
</style>
